<template>
    <div class="content">
        <empty v-if="!isList.length"></empty>

        <van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="downPage">
            <div class="card" @click="pageto(item)" v-for="(item, index) in isList" :key="index">
                <div class="flexsty">
                    <img src="@/assets/index/person.png" style="width: 35px; height: 35px; margin-left: 15px" alt="" />
                    <div style="margin-left: 10px">
                        <div style="color: #545454; margin-bottom: 10px">{{ item.SOURCE_AGENT_NAME }}调拨给{{ item.TARGET_AGENT_NAME }}</div>
                        <div style="color: #9a9a9a">{{ changeFormdate(item.CREATE_TIME) }}</div>
                    </div>
                </div>
                <div>
                    <span style="font-size: 14px; color: #545454">{{ item.COUNT }}台</span>
                    <img src="@/assets/chevron-down@2x.png" style="width: 15px; height: 15px; margin-right: 12px; vertical-align: bottom" />
                </div>
            </div>
        </van-list>
    </div>
</template>

<script lang="ts" setup>
import { allotRecord } from '../../api/posManagement'
import { formatDate } from '../../utils/filter.js'
import { useRouter } from 'vue-router'
const pageNum = ref(0)
const loading = ref(false)
const finished = ref(false)
let isList = ref([])
const router = useRouter()

const pageto = item => {
    router.push({
        path: '/recordDetailed',
        query: {
            id: item.BILL_NO
        }
    })
}
const changeFormdate = computed(() => {
    return time => {
        let date = new Date(time)
        return formatDate(date, 'yyyy-m-d h:i:s')
    }
})
const recordList = () => {
    allotRecord({
        currentPage: pageNum.value
    }).then(res => {
        if (res.object.length < 10) {
            finished.value = true
        }
        loading.value = false
        isList.value = isList.value.concat(res.object)
        console.log(isList.value, 'isList.value')
    })
}
const downPage = () => {
    pageNum.value += 1
    recordList()
}
//  recordList()
</script>

<style scoped lang="scss">
.content {
    padding: 10px;
    background: #f5f5f5;
    width: 100vw;
    height: 100vh;
}

.card {
    width: 100%;
    background: #fff;
    border-radius: 6px;
    padding: 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}

.flexsty {
    display: flex;
    flex-direction: columns;
}
</style>
